<template>
  <view class="coupon_box">
    <view class="bg-b">
      <view class="left" :class="bgcolor"> </view>
      <view class="center">
        <img :src="[getBgcolor]" alt="" mode="heightFix" />
      </view>
      <view class="right" :class="bgcolor"></view>
    </view>
    <view class="content">
      <view class="left">
        <view class="price_box">
          <view :class="bgcolor == 'gray' ? 'gray_price_text' : 'price_text'">{{
            amount
          }}</view>
        </view>
        <view :class="bgcolor == 'gray' ? 'gray_prompt' : 'prompt'"
          >购买满{{ enough }}元减{{ amount }}元</view
        >
      </view>
      <view class="right">
        <view class="top_box">
          <view :class="bgcolor == 'gray' ? 'gray_title' : 'title'">{{
            name
          }}</view>
          <view class="getBtn" v-if="btn == 'toGet'" @click="toGetCoupon"
            >立即领取</view
          >
          <view class="useBtn" v-if="btn == 'toUse'" @click="toUseCoupon"
            >去使用</view
          >
        </view>
        <view :class="bgcolor == 'gray' ? 'gray_line1' : 'line1'"
          ><text v-if="effect_type == 'activity'">仅限活动使用</text>
          <text v-if="effect_type == 'goods'">仅限直购、预售使用</text
          ><text v-if="effect_type == 'global'">全场可用</text>
        </view>
        <view :class="bgcolor == 'gray' ? 'gray_line2' : 'line2'">
          <view class="time_text">有效期至</view>
          <view class="time">{{ usetimeend_text }}</view>
        </view>
        <view
          :class="bgcolor == 'gray' ? 'gray_line3' : 'line3'"
          @click.stop="this.showDetail = !this.showDetail"
        >
          <view class="detail_text">详细说明</view>
          <u-icon
            name="arrow-down"
            :color="
              bgcolor == 'gray'
                ? 'rgba(151, 151, 151, 0.8)'
                : 'rgba(255, 255, 255, 0.7)'
            "
            size="20"
            v-if="!showDetail"
          ></u-icon>
          <u-icon
            name="arrow-up"
            :color="
              bgcolor == 'gray'
                ? 'rgba(151, 151, 151, 0.8)'
                : 'rgba(255, 255, 255, 0.7)'
            "
            size="20"
            v-if="showDetail"
          ></u-icon>
        </view>
      </view>
      <!-- 已使用已过期标签 -->
      <view class="hadUsed" v-if="bqStatus == 'hadUsed'"
        ><img src="./images/r1.png" alt=""
      /></view>
      <view class="hadExpired" v-if="bqStatus == 'hadExpired'"
        ><img src="./images/r2.png" alt=""
      /></view>
    </view>
    <view class="detail_box" v-if="showDetail" :class="bgcolor">
      <view
        :class="bgcolor == 'gray' ? 'grayType_detail_line' : 'detail_line'"
        v-for="(item, index) in description"
        :key="index"
        >{{ item }}</view
      >
    </view>
  </view>
</template>
<script>
/**
 *shoproCoupon - 优惠券卡片
 * @property {String} btn - 显示右侧按钮，默认无
 * @property {String} bqStatus - 显示已使用已过期标签,默认无
 * @property {String} bgcolor - 卡片主题颜色,默认红色
 * @property {String} name - 优惠券名称
 * @property {String} amount - 券面额
 * @property {String} enough - 消费门槛
 * @property {String} description - 优惠券说明
 * @property {String} usetimeend_text - 有效期至
 * @property {String} effect_type - 作用范围类型
 * @method getCoupon 领取优惠券
 * @method toUseCoupon 使用优惠券
 */
import c1 from './images/c1.png';
import c2 from './images/c2.png';
import c3 from './images/c3.png';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      showDetail: false,
    };
  },
  props: {
    //toGet-立即领取,toUse去使用
    btn: {
      type: String,
      default: '',
    },
    //hadUsed-已使用,hadExpired-已过期
    bqStatus: {
      type: String,
      default: '',
    },
    //red-红色,purple-紫色,gray-灰色
    bgcolor: {
      type: String,
      default: 'red',
    },
    //优惠券名称
    name: {
      type: String,
      default: '',
    },
    //券面额
    amount: {
      type: String,
      default: '',
    },
    //消费门槛
    enough: {
      type: String,
      default: '',
    },
    //优惠券说明
    description: {
      type: Array,
      default: [],
    },
    //有效期至
    usetimeend_text: {
      type: String,
      default: '',
    },
    //作用范围类型
    effect_type: {
      type: String,
      default: '',
    },
  },
  // 计算属性 适配者模式
  computed: {
    getBgcolor() {
      return this.bgcolor == 'purple' ? c1 : this.bgcolor == 'gray' ? c3 : c2;
    },
  },
  // 数据监听
  watch: {},

  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    toGetCoupon() {
      _delay(() => {
        this.$emit('getCoupon');
      });
    },
    toUseCoupon() {
      _delay(() => {
        this.$emit('useCoupon');
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.coupon_box {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 19rpx;
  overflow: hidden;
  border-radius: 10rpx;

  // filter: drop-shadow();
  // background: linear-gradient(180deg, #fd806e 0%, #de3249 100%, #de3349 100%);
  .bg-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 187rpx;
    display: flex;
    border-radius: 10rpx;
    z-index: 99;
    -webkit-mask-box-image: linear-gradient(
      -180deg,
      rgba(255, 255, 255, 0.6) 0%,
      #de3249 100%,
      #de3249 100%
    );
    // -webkit-mask-box-image: radial-gradient(
    //   circle at 50% -40%,
    //   rgba(252, 126, 109, 0.6) 43.777%,
    //   #de3249
    // );

    .left {
      width: 200rpx;
      height: 187rpx;
    }
    .center {
      height: 187rpx;
      img {
        height: 187rpx;
      }
    }
    .right {
      flex: 1;
    }
    .red {
      background-color: #de3249;
    }
    .purple {
      background-color: #9677ee;
    }
    .gray {
      background-color: #bfbfbf;
    }
  }
  .content {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 187rpx;
    display: flex;
    justify-content: space-between;
    .left {
      width: 226rpx;
      height: 187rpx;
      .price_box {
        margin-top: 20rpx;
        text-align: center;
        .price_text {
          font-size: 84rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 700;
          color: #ffffff;
          display: inline;
          margin-left: -16rpx;
          &::before {
            content: '￥';
            font-size: 64rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            display: inline-block;
            margin-right: -10rpx;
          }
        }
        .gray_price_text {
          font-size: 84rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 700;
          color: #979797;
          display: inline;
          margin-left: -16rpx;
          &::before {
            content: '￥';
            font-size: 64rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #979797;
            display: inline-block;
            margin-right: -10rpx;
          }
        }
      }
      .prompt {
        margin-left: 15rpx;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      .gray_prompt {
        margin-left: 15rpx;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #979797;
      }
    }
    .right {
      width: 380rpx;
      padding-right: 20rpx;
      .top_box {
        margin-top: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 51rpx;
        width: 100%;
        .title {
          font-size: 38rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
        .gray_title {
          font-size: 38rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #979797;
        }
        .getBtn {
          width: 137rpx;
          height: 51rpx;
          background: #f6c971;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 51rpx;
          text-align: center;
        }
        .useBtn {
          width: 137rpx;
          height: 51rpx;
          background: #9677ee;
          border-radius: 50rpx 50rpx 50rpx 50rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 51rpx;
          text-align: center;
        }
      }
      .line1 {
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        width: 100%;
      }
      .gray_line1 {
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(151, 151, 151, 0.8);
        width: 100%;
      }
      .line2 {
        display: flex;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        width: 100%;
        .time {
          margin-left: 10rpx;
        }
      }
      .gray_line2 {
        display: flex;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(151, 151, 151, 0.8);
        width: 100%;
        .time {
          margin-left: 10rpx;
        }
      }
      .line3 {
        display: flex;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        width: 100%;
        .detail_text {
          margin-right: 10rpx;
        }
      }
      .gray_line3 {
        display: flex;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(151, 151, 151, 0.8);
        width: 100%;
        .detail_text {
          margin-right: 10rpx;
        }
      }
    }
    .hadUsed,
    .hadExpired {
      position: absolute;
      top: 11rpx;
      right: 21rpx;
      width: 123rpx;
      height: 123rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .detail_box {
    width: 100%;
    min-height: 50rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: -20rpx;
    padding: 30rpx;
    &.red {
      background: #febac2;
    }
    &.purple {
      background: #cbbafe;
    }
    &.gray {
      background: #f2f2f2;
    }
    .detail_line {
      font-size: 20rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 28rpx;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        width: 4rpx;
        height: 4rpx;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
        margin-right: 10rpx;
      }
    }
    .grayType_detail_line {
      font-size: 20rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: rgba(151, 151, 151, 0.8);
      line-height: 28rpx;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        width: 4rpx;
        height: 4rpx;
        border-radius: 50%;
        background-color: rgba(151, 151, 151, 0.8);
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
